<template>
    <right-layout :visible.sync="show" :title="title" @closeLayout="closeLayout">
        <el-form :model="ruleForm" :rules="rules" label-width="130px" ref="form" label-suffix="：">
            <el-form-item label="群组名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item prop="color">
                <ColorLabel v-model="ruleForm.color"></ColorLabel>
            </el-form-item>
            <el-form-item label="负责人" prop="dutyId">
                <select-user v-model="ruleForm.dutyId" :label.sync="ruleForm.dutyName"></select-user>
            </el-form-item>
            <el-form-item label="群组人数" prop="usercnt" v-if="ruleForm.id">
                <p>{{ ruleForm.usercnt }} 人</p>
            </el-form-item>
            <el-form-item label="可见范围" prop="scopeCode">
                <select-para :options="sysParaObj['SP_GROUP_VIEW']" v-model="ruleForm.scopeCode" :label.sync="ruleForm.scopeName"></select-para>
            </el-form-item>
            <el-form-item label="群主题" prop="theme">
                <el-input v-model="ruleForm.theme" type="textarea" :rows="4"></el-input>
                <text-length v-model="ruleForm.theme" :length.sync="ruleForm.theme_l" :max="256"></text-length>
            </el-form-item>
            <el-form-item label="包含子部门员工" prop="isHaveSub">
                <el-switch v-model="ruleForm.isHaveSub" :active-value="1" :inactive-value="0"></el-switch>
                <div class="tips">开启后，本部门下的部门员工将被加入到该部门群</div>
            </el-form-item>
        </el-form>
        <div slot="foot">
            <div class="left">
                <el-button type="text" @click="closeLayout">关闭</el-button>
            </div>
            <el-button type="primary" @click="submitFun" :loading="loading">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
    </right-layout>
</template>

<script>
import RightLayout from '@/components/layout/RightLayout';
import selectUser from '@/components/selectUser';
import selectPara from '@/components/selectPara';
import textLength from '@/components/textLength';
import ColorLabel from '@/components/ColorLabel';
import { commPara } from '@/mixins/mixins';
import { saveOrUpdateGroup, getGroupById } from "../../service.js";

export default {
    name: 'orgGroup', // 新增/修改 群组
    props: {
        deptId: String
    },
    components: { RightLayout, selectUser, selectPara, textLength, ColorLabel },
    mixins: [ commPara ],
    data() {
        var validate_theme = (rule, value, callback) => {
            if(this.ruleForm.theme_l > 256) {
                callback(new Error());
            }else {
                callback()
            }
        }
        return {
            sysParaObj: {
                'SP_GROUP_VIEW': []
            },
            show: false,
            title: '创建群组',
            ruleForm: {
                id: '',
                name: '',
                color: '',
                dutyId: '',
                dutyName: '',
                usercnt: '', // 群组人数
                scopeCode: '',
                scopeName: '',
                theme: '',
                theme_l: 0,
                isHaveSub: 0,
            },
            rules: {
                name: [
                    { required: true, message: '群组名称必填', trigger: 'change' },
                    { min: 0, max: 20, message: '长度限制20位', trigger: 'change' }
                ],
                theme: [
                    { validator: validate_theme, message: '长度限制256位', trigger: 'blur' },
                ]
            },
            loading: false,
        }
    },
    methods: {
        showLayout() {
            this.title = '创建群组';
            this.ruleForm.id = '';
            this.show = true;
        },
        showEdit(row) {
            this.title = '修改群组';
            this.ruleForm.id = row.id;
            this.queryDetail();
            this.show = true;
        },
        closeLayout() {
            this.show = false;
            this.ruleForm.id = '';
            this.resetForm();
        },
        submitFun() {
            this.$refs.form.validate(valid => {
                if(valid) {
                    let params = {
                        id: this.ruleForm.id,
                        name: this.ruleForm.name,
                        color: this.ruleForm.color,
                        busiId: this.deptId,
                        typeCode: 'BMQ',
                        dutyId: this.ruleForm.dutyId,
                        dutyName: this.ruleForm.dutyName,
                        usercnt: this.ruleForm.usercnt, // 群组人数
                        scopeCode: this.ruleForm.scopeCode,
                        scopeName: this.ruleForm.scopeName,
                        theme: this.ruleForm.theme,
                        isHaveSub: this.ruleForm.isHaveSub,
                    }
                    this.loading = true;
                    saveOrUpdateGroup(params).then(res => {
                        if(res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '保存成功！'
                            })
                            this.$emit('refresh');
                            this.closeLayout();
                        }
                        this.loading = false;
                    }).catch(error => {
                        this.loading = false;
                    })
                }
            })
        },
        resetForm() {
            if(!this.ruleForm.id) {
                this.$refs.form.resetFields();
            }else {
                this.queryDetail();
            }
        },
        queryDetail() {
            let params = {
                id: this.ruleForm.id
            }
            getGroupById(params).then(res => {
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(data) {
                        this.ruleForm.name = data.name;
                        this.ruleForm.color = data.color;
                        this.ruleForm.dutyId = data.dutyId;
                        this.ruleForm.dutyName = data.dutyName;
                        this.ruleForm.usercnt = data.usercnt;
                        this.ruleForm.scopeCode = data.scopeCode;
                        this.ruleForm.scopeName = data.scopeName;
                        this.ruleForm.theme = data.theme;
                        this.ruleForm.isHaveSub = data.isHaveSub;
                    }
                }
            })
        }
    }
}
</script>